<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>代码生成工具</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-form ref="form" style="margin-top: 40px" :model="form" label-width="160px">
        <el-form-item label="用户名">
            <el-input v-model="form.username" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="form.password" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="数据库名称">
            <el-input v-model="database" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" @click="connect">点击连接</el-button>
            <el-tag :type="msg === '数据库未连接' ? 'danger': 'success'">{{ msg }}</el-tag>
        </el-form-item>
    </el-form>
    <el-input v-model="packageName" style="width: 300px; margin-left: 160px"></el-input>
    <el-button @click="config" type="success" size="small">点击配置</el-button>

    <el-table
            border
            v-show="tableData.length >= 1"
            :data="tableData"
            style="width: 1000px; margin-left: 160px; margin-top: 20px">
        <el-table-column
                align="center"
                prop="packageName"
                label="package"
                width="180">
        </el-table-column>
        <el-table-column
                align="center"
                prop="tableName"
                label="table">
        </el-table-column>
        <el-table-column
                align="center"
                prop="modelName"
                label="model"
                width="180">
        </el-table-column>
        <el-table-column
                align="center"
                prop="serviceName"
                label="service">
        </el-table-column>
        <el-table-column
                align="center"
                prop="controllerName"
                label="controller">
        </el-table-column>
    </el-table>

    <el-button @click="generateCode" style="margin-left: 160px; margin-top: 20px" size="small" type="success">生成代码</el-button>
    <div style="color: #ff0114;font-weight: bold; margin-left: 160px">*{{result}}*</div>
    <div style="margin-left: 160px">{{codePath}}</div>

</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                form: {
                    username: 'root',
                    password: '1234',
                    url: '',
                },
                database: 'generate',
                packageName: 'com.tlgen',
                msg: '数据库未连接',
                tableData: [],
                result: 'waiting',
                codePath: '',
            }
        },
        methods: {
            connect() {
                let _this = this
                this.form.url = 'jdbc:mysql://localhost:3306/' + this.database + '?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai'
                console.log(this.form)
                axios.post("/connect", this.form).then(res => {
                    console.log(res)
                    _this.msg = res.data.msg
                })
            },
            config() {
                let _this = this
                axios.post("/config", {packageName: this.packageName}).then(res => {
                    console.log(res)
                    _this.tableData = res.data.obj
                })
            },
            generateCode() {
                let _this = this;
                axios.post('/generateCode', this.tableData)
                    .then(res => {
                        _this.result = res.data.msg;
                        _this.codePath = res.data.obj;
                 })
            },
        }
    })
</script>
</html>
